<template>
    <div>
        <el-form :inline="true" :model="appointment" class="demo-form-inline">
            <el-form-item label="教师编号" v-if="conversion==1">
                <el-input v-model="appointment.teacher_id" placeholder="请输入教师编号" @change="appointmentCQuery()"></el-input>
            </el-form-item>
            <el-form-item v-if="conversion==1">
                <el-input v-model="appointment.teacher_name" placeholder="教师姓名" :disabled="true" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="课程编号" v-if="conversion==2">
                <el-input v-model="appointment.course_id" placeholder="请输入课程编号" @change="appointmentTQuery()"></el-input>
            </el-form-item>
            <el-form-item v-if="conversion==2">
                <el-input v-model="appointment.course_name" placeholder="课程名称" :disabled="true" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item style=" margin: 0 100px;">
                <el-radio-group v-model="conversion" @change="cr()" @click="cr()">
                    <el-radio-button label="1">教师</el-radio-button>
                    <el-radio-button label="2">课程</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="conversion==1">
                <el-select v-model="appointment.course_name" placeholder="请选择课程">
                    <el-option v-for="c in courseData" :key="c" :label="c" :value="c"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="conversion==2">
                <el-select v-model="appointment.teacher_name" placeholder="请选择教师">
                    <el-option v-for="t in teacherData" :key="t" :label="t" :value="t"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="conversion==1">
                <el-button type="primary" @click="addCourse()">添加选课</el-button>
            </el-form-item>
            <el-form-item v-if="conversion==2">
                <el-button type="primary" @click="addTeacher()">添加教师</el-button>
            </el-form-item>
        </el-form>
        <table style="width: 100%; border: none; margin-top: 30px;" cellspacing="0"  v-if="conversion==1">
            <tr style="font-weight: 800;">
                <td>课程编号</td>
                <td>课程名称</td>
                <td>教师名称</td>
                <td>操作</td>
            </tr>
            <tr v-for="a in appointmentCData">
                <td>{{ a.course_id }}</td>
                <td>{{ a.course_name }}</td>
                <td>{{ a.teacher_name }}</td>
                <td>
                    <el-button type="danger" @click="cDelConfirm(a.course_id)">删除</el-button>
                </td>
            </tr>
        </table>
        <table style="width: 100%; border: none; margin-top: 30px;" cellspacing="0" v-if="conversion==2">
            <tr style="font-weight: 800;">
                <td>教师编号</td>
                <td>教师名称</td>
                <td>课程名称</td>
                <td>操作</td>
            </tr>
            <tr v-for="a in appointmentTData">
                <td>{{ a.teacher_id }}</td>
                <td>{{ a.teacher_name }}</td>
                <td>{{ a.course_name }}</td>
                <td>
                    <el-button type="danger" @click="tDelConfirm(a.teacher_id)">删除</el-button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default{
        name:"Appointment",
        data() {
            return {
               appointment:{
                    teacher_id:"",
                    teacher_name:"",
                    course_id:"",
                    course_name:"",
               },
               conversion:"1",
               teacherData:[],
               courseData:[],
               appointmentCData:[],
               appointmentTData:[],
            }
        },
        created() {
            this.getCourseData();
            this.getTeacherData();
        },
        methods: {
            getCourseData() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/appointment/getCourseData',
                }).then(res=>{
                    this.courseData=res.data.data;
                    console.log(this.courseData)
                }).catch(err=>{
                    console.log(err);
                })
            },
            getTeacherData() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/appointment/getTeacherData',
                }).then(res=>{
                    this.teacherData=res.data.data;
                    console.log(this.teacherData)
                }).catch(err=>{
                    console.log(err);
                })
            },
            appointmentCQuery() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/appointment/findAppointmentCPart',
                    params: {
                        // course_id:this.appointment.course_id,
                        teacher_id:this.appointment.teacher_id
                    }
                }).then(res=>{
                    this.appointmentCData=res.data.data;
                    this.nameQuery();
                }).catch(err=>{
                    console.log(err);
                })
            },
            appointmentTQuery() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/appointment/findAppointmentTPart',
                    params: {
                        course_id:this.appointment.course_id,
                        // teacher_id:this.appointment.teacher_id
                    }
                }).then(res=>{
                    this.appointmentTData=res.data.data;
                    this.nameQuery();
                }).catch(err=>{
                    console.log(err);
                })
            },
            nameQuery() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/appointment/findTeacherNameAndCourseName',
                    params: {
                        course_id:this.appointment.course_id,
                        teacher_id:this.appointment.teacher_id
                    }
                }).then(res=>{
                    this.appointment.teacher_name=res.data.data[0];
                    this.appointment.course_name=res.data.data[1];
                }).catch(err=>{
                    console.log(err);
                })
            },
            addCourse() {
                this.$axios({
                    method:'post',
                    url:'http://localhost:8081/workbench/appointment/addApprointmentByTIdAndCName',
                    data: {
                        teacher_id:this.appointment.teacher_id,
                        course_name:this.appointment.course_name,
                    }
                }).then(res=>{
                    this.appointmentCQuery();
                    console.log(res);
                }).catch(err=>{
                    console.log(err);
                })
            },
            addTeacher() {
                this.$axios({
                    method:'post',
                    url:'http://localhost:8081/workbench/appointment/addApprointmentByTNameAndCId',
                    data: {
                        teacher_name:this.appointment.teacher_name,
                        course_id:this.appointment.course_id,
                    }
                }).then(res=>{
                    this.appointmentTQuery();
                    console.log(res);
                }).catch(err=>{
                    console.log(err);
                })
            },
            cDelConfirm(course_id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.removeCourseAppointment(course_id);
                this.$message({ 
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            tDelConfirm(teacher_id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.removeTeacherAppointment(teacher_id);
                this.$message({ 
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            removeCourseAppointment(course_id) {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/appointment/removeAppointmentById',
                    params: {
                        teacher_id:this.appointment.teacher_id,
                        course_id:course_id,
                    }
                }).then(res=>{
                    this.appointmentCQuery();
                    console.log(res);
                }).catch(err=>{
                    console.log(err);
                })
            },
            removeTeacherAppointment(teacher_id) {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/appointment/removeAppointmentById',
                    params: {
                        teacher_id:teacher_id,
                        course_id:this.appointment.course_id,
                    }
                }).then(res=>{
                    this.appointmentTQuery();
                    console.log(res);
                }).catch(err=>{
                    console.log(err);
                })
            },
            cr() {
                this.appointment.course_id="";
                this.appointment.teacher_id="";
                this.appointmentTData="";
                this.appointmentCData="";
            }
        }
    }
</script>

<style scoped>
    .el-form-item {
        margin: 5px;
    }
</style>